<template>
  <FullscreenCard class="wrapper">
		<div class="map-china" ref="mapchina"></div>
	</FullscreenCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import FullscreenCard from '@/components/FullscreenCard'
import request from '@/utils/request'
import { rangeRandom } from '@/utils/common'

const mapName = 'china'
const mapchina = ref<any>(null)
const myChart = ref<any>(null)
const chinaCode = '100000'
const geoJsonFeatures = ref<any>([])
// 获取点击区域地图
const getGeoJsonFull = async(code: any) => {
  if(!code)return ''
  const jsonUrl = `/mapApi/areas_v3/bound/${code}_full.json`
  const res = await request.get(jsonUrl)
  // console.log('geoJsonFull', res)
  return res.data || {}
}
const initChart = async(code: any) => {
  try {
    myChart.value = echarts.init(mapchina.value)
    myChart.value.showLoading()
    const geoJsonFull = await getGeoJsonFull(code)
    geoJsonFeatures.value = geoJsonFull.features || []
    echarts.registerMap(mapName, geoJsonFull)
    const option = {
      title: {
        text: '',
        left: 'center'
      },
      // visualMap: {
      //   min: 0,
      //   max: 200000,
      //   text: ['High', 'Low'],
      //   realtime: false,
      //   calculable: true,
      //   inRange: {
      //     color: ['lightskyblue', 'yellow', 'orangered']
      //   }
      // },
      backgroundColor: 'transparent',
      bmap: {
        map: mapName,
        center: [104.089562, 30.661904],
        zoom: 5,
        roam: true,
        mapStyle: {
          styleJson: [
          ]
        }
      },
      series: [
        {
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: geoJsonFeatures.value.map((v: any) => ({
            name: v.properties.name,
            value: rangeRandom(100, 200000)
          })),
        },
        // {
        //   name: '中国行政图',
        //   type: 'map',
        //   map: mapName,
        //   zoom: 1.2,
        //   layoutCenter: ['50%', '50%'],
        //   label: {
        //     show: true
        //   },
        //   data: geoJsonFeatures.value.map((v: any) => ({
        //     name: v.properties.name,
        //     value: rangeRandom(100, 200000)
        //   })),
        // },
      ]
    }
    myChart.value.setOption(option, true)
    myChart.value.hideLoading()
    const resizeFn = () => {
      myChart.value.resize()
    }
    window.removeEventListener('resize', resizeFn)
    window.addEventListener('resize', resizeFn)
  } catch (e) {
    myChart.value.hideLoading() 
  }
}
onMounted(() => {
  initChart(chinaCode)
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.map-china {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>
